import { message as antdMessage } from "../../antd/index";
import { ErrorIcon, InfoIcon, SuccessIcon, WarnIcon } from "../Svg";
import "./style/index";

import { MessageApi as AntdMessageApi, NoticeType, ArgsProps } from "../../antd/message";
export type MessageApiKey = NoticeType | "warn" | "open";

type Api = AntdMessageApi["open"];
type MessageStateApi = {
  [key in MessageApiKey]: Api;
};
export type MessageApi = AntdMessageApi & MessageStateApi;
// export interface MessageApi extends AntdMessageApi, MessageStateApi {}

const icons: {
  [key in MessageApiKey]: (() => JSX.Element) | null;
} = {
  success: SuccessIcon,
  info: InfoIcon,
  error: ErrorIcon,
  warning: WarnIcon,
  warn: WarnIcon,
  open: null,
  loading: null,
};
const Keys: MessageApiKey[] = ["success", "info", "error", "warning", "warn", "open", "loading"];

const api: MessageStateApi = Keys.reduce((api, key) => {
  api[key] = (args: ArgsProps) => {
    const icon = icons[key];
    const params = { icon: icon && icon(), ...args };
    console.log(icon, key, antdMessage[key], params);

    return antdMessage[key].call(null, params);
  };
  return api;
}, {} as MessageStateApi);

const { config, destroy, useMessage } = antdMessage;
const message: MessageApi = { config, destroy, useMessage, ...api };

export default message;
